<template>
	<view class="wrap">
		<js-lang title="user.tocTitle"></js-lang>
		<u-avatar class="userinfo" :src="model.avatar" :size="240" />

		<u-form class="form" :model="model" :rules="rules" ref="uForm">
			<u-form-item label="ID" prop="userId" label-width="120">
				<u-input v-model="model.userId" type="text"></u-input>
			</u-form-item>
			<u-form-item label="用户名" prop="username" label-width="120">
				<u-input v-model="model.username" type="text"></u-input>
			</u-form-item>
			<u-form-item label="昵称" prop="nickname" label-width="120">
				<u-input v-model="model.nickname" type="text"></u-input>
			</u-form-item>
			<u-form-item label="请求令牌" prop="accessToken" label-width="120">
				<u-input v-model="model.accessToken" type="text"></u-input>
			</u-form-item>
			<u-form-item label="过期时间" prop="nfb" label-width="120">
				<u-input v-model="model.expiresIn" type="text"></u-input>
			</u-form-item>
			<u-form-item label="客户端" prop="clientId" label-width="120">
				<u-input v-model="model.clientId" type="text"></u-input>
			</u-form-item>
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="logout()">退出</u-button>
		</view>
	</view>
</template>
<script>

export default {
	data() {
		return {
			model: {
				userId: undefined,
				avatar: undefined,
				nickname: undefined,
				accessToken: undefined,
				refreshToken: undefined,
				clientId: undefined,
				expiresIn: undefined,

			},
		};
	},
	onLoad() {
		this.model = this.vuexUser;
		this.model.clientId = this.vuexToken.client_id;
		this.model.accessToken = this.vuexToken.access_token;

		const currentTime = Date.now();
		const expiryTime = currentTime + (this.vuexToken.expires_in * 1000);
		this.model.expiresIn = new Date(expiryTime);
	},
	methods: {
		logout() {
			this.$u.api.vxLogout().then((res) => {
				this.$u.toast(res.message);

				//清空存储信息
				this.$u.vuex("vuexToken", "");
				this.$u.vuex("vuexUser", {});
				this.$u.vuex("vuexLoginType", undefined);

				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/sys/login/index",
					});
				}, 500);
			});
		}
	},
};
</script>

<style lang="scss">
.userinfo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>